09. Pattern - Off Canvas

INSTRUCTOR NOTE:

Here's a live version of the demo!

Here's the JavaScript used to toggle the open class:

menu.addEventListener('click', function(e) {
  drawer.classList.toggle('open');
  e.stopPropagation();
});

Here's the relevant CSS for transitioning the hamburger menu:

nav {
  width: 300px;
  position: absolute;
  /* This trasform moves the drawer off canvas. */
  -webkit-transform: translate(-300px, 0);
  transform: translate(-300px, 0);
  /* Optionally, we animate the drawer. */
  transition: transform 0.3s ease;
}
nav.open {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

At 1:51, the JavaScript that's shown tells us that we are adding an event listener to do something when the user clicks the (hamburger) menu button. The event listener tells the drawer to toggle the class open which means that if the drawer does not have the class open then it will add it and if it does have the class open it will remove it. The rule for nav.open is shown at 1:27 which tells the nav to translate back into place to position 0,0. This is when it is open. Without this class it is translated off screen at (-300px, 0), see 1:16.

Also, what's that e.stopPropagation() about? Read more about events and event propagation on MDN.